<template>
    <div class="vue-parent" style="height: 100vh">
        <mu-appbar style="width: 100%; height: 7vh;" color="primary">
            <mu-button icon slot="left" @click="back">
                <mu-icon value="chevron_left"></mu-icon>
            </mu-button>
            库 存 盘 点
        </mu-appbar>

        <mu-container style="margin-top: 20px">
            <div><div style="margin: 10px">（ 表格可左滑移 ）</div></div>
            <mu-expansion-panel v-for="(item,index) in list" :expand="panel === index" @change="toggle(index)">
                <div slot="header">{{item.title}}</div>
                <mu-data-table stripe :columns="columns" :sort.sync="sort" @sort-change="handleSortChange"
                               :data="item.products" style="padding: 0">
                    <template slot-scope="scope">
                        <td>{{scope.row.productName}}</td>
                        <td class="is-center">{{scope.row.inventory}}</td>
                        <td class="is-center">{{scope.row.retailPrice}}</td>
                        <td class="is-center">{{scope.row.cost}}</td>
                    </template>
                </mu-data-table>
            </mu-expansion-panel>
        </mu-container>
    </div>
</template>

<script>
    export default {
        name: "inventory",
        data() {
            return {
                panel: '',
                sort: {
                    name: '',
                    order: 'asc'
                },
                category:[],
                columns: [
                    {title: '品名', name: 'productName', width: 100, align: 'center', sortable: true},
                    {title: '库存', name: 'inventory', width: 100, align: 'center', sortable: true},
                    {title: '零售价', name: 'retailPrice', width: 100, align: 'center', sortable: true},
                    {title: '产品成本', name: 'cost', width: 100, align: 'center', sortable: true},
                ],
                list: [
                    // {
                    //     title: "补水五件套",
                    //     products: [
                    //         {
                    //             category: 205,
                    //             cost: 76,
                    //             createdDate: "2018-04-25 00:00:00",
                    //             createdby: "",
                    //             inventory: 0,
                    //             isDeleted: 0,
                    //             productName: "盈润组合五件套",
                    //             retailPrice: 760,
                    //             salePrice: 488,
                    //             sort: 330,
                    //             specification: "",
                    //             updatedDate: "2018-11-22 07:51:19",
                    //             updatedby: "",
                    //             versionNumber: 0,
                    //         }
                    //     ]
                    // }
                ]
            }
        },
        methods: {
            toggle(panel) {
                this.panel = panel === this.panel ? '' : panel;
            },
            handleSortChange({name, order}) {
                this.list = this.list.sort((a, b) => order === 'asc' ? a[name] - b[name] : b[name] - a[name]);
            },
            // 处理产品
            handleProduct(products,category,_this){
                _this.list = [];
                for (let i = 0; i <category.length ; i++) {
                    var code = category[i].code;
                    var title= category[i].value;
                    var arr = [];
                    for (let j = products.length-1; j >=0 ; j--) {
                        if (products[j].category === code) {
                            delete products[j].id;
                            arr.push(window.copy(products[j]));
                            products.splice(j, 1);
                        }

                    }

                    _this.list.push({title:title,products:arr});
                }
            },
            /**
             * 获取所有产品
             */
            getAllProducts: function () {
                var _this = this;
                this.$http.get(this.$Api.basic.allProducts).then((res) => {
                    var resp = res.data;
                    if (resp.code === _this.$ResponseCode.ok) {
                        _this.handleProduct(resp.info.data,_this.category,_this);
                    } else {
                        window.failedNotify(Toast, resp.info.msg);
                    }
                });
            },
            // 获取所有产品系列类别
            getAllProductCategory: function () {
                var _this = this;
                this.$http.get(this.$Api.basic.productCategory.concat("?code=", 2)).then((res) => {
                    var resp = res.data;
                    if (resp.code == _this.$ResponseCode.ok) {
                        // 获取所有产品信息
                        _this.category = resp.info.data;
                        _this.getAllProducts();
                    } else {
                        window.failedNotify(Toast, resp.info.msg);
                    }
                });

            },
            // 返回
            back() {
                this.$router.go(-1)
            },
        }, created() {
            this.getAllProductCategory();
        }
    }
</script>

<style>
    .mu-expansion-panel-content {
        padding: 0 !important;
    }

    .mu-table td {
        padding: 0 12px !important;
    }

    .mu-table th {
        padding: 0 12px !important;
    }

    .mu-table th.is-sortable {
        font-size: 15px;
    }
</style>
